Transformations

La propriété CSS "transform" permet de modifier l'apparence d'un élément sans réellement déranger le flux (changements uniquement visuels).

En savoir plus sur toutes les transformations existantes : https://developer.mozilla.org/fr/docs/Web/CSS/transform

Générateur de matrices de transformation personnalisées : https://angrytools.com/css-generator/transform/

Translation

La translation permet de déplacer horizontalement ou/et verticalement l'élément :

            

                    /* Déplace l'élément de 25 pixels sur la droite */
                    transform: translate(25px);

                    /* Déplace l'élément de 25 pixels sur la gauche et 25 pixels vers le bas */
                    transform: translate(-25px, 25px);

Zoom

Le zoom permet d'agrandir horizontalement ou/et verticalement l'élément :

            

                    /* l'élément apparaîtra 2 fois plus gros */
                    transform: scale(2);

                    /* l'élément apparaîtra 5 fois plus petit */
                    transform: scale(0.2);

Rotation

La rotation permet de faire tourner l'élément sur son axe (unité de mesure en degrés) :

            

                    /* l'élément apparaîtra à l'envers */
                    transform: rotate(180deg);